var json = {
    div_container:{
        type: 'div',
        width: '183px',
        height: '133px',
        backgroundColor: '',
        border: '1px solid #000',
        cssFloat: 'left'
    },

    img_folder:{
        type: 'img',
        width: '85%',
        height: '85%'
    },

    par_name:{
        type: 'par'
    }
}

var path = require('path');
var fs = require('fs');

process.chdir('C:/Program Files (x86)/Common Files/Adobe/CEP/extensions/AfterEffectPanel');
var currentFolderPath = fs.readFileSync('./js/currentPath.txt', 'utf8');
var div_Main = CreateMainDivElement();
var showProjectPath =  document.getElementById('projectPath')

window.onload = function(){
    ReadFolder('');
}

var returnButton = document.getElementById('returnButton');
returnButton.addEventListener('click', function(){
    
    currentFolderPath = path.resolve(currentFolderPath, '../');
    ReadFolder('');
});


var gotoButton = document.getElementById('gotoButton');
gotoButton.onclick = function(){
    var orign = currentFolderPath;
    currentFolderPath = showProjectPath.value;
    ReadFolder('');
}

function ReadFolder(inPath){
    currentFolderPath = path.join(currentFolderPath,inPath);
    var fileCollection = new Object();
    fileCollection.folderArray = new Array();
    fileCollection.fileArray = new Array();
    showProjectPath.value = currentFolderPath;
    fs.writeFileSync('./js/currentPath.txt', currentFolderPath.toString(), 'utf8');
    //读取文件夹内容
    fs.readdir(currentFolderPath,function(err,files){
        if(err){
            alert(err);
        }else{
            //清空Body标签
            div_Main.innerHTML = "";
            //加载返回按钮
            // var button = document.createElement('returnButton');
            // document.body.appendChild(button);
            // button.addEventListener('click', function(){
            //     alert(123);
            //     currentFolderPath = path.resolve(currentFolderPath, '../');
            //     ReadFolder('');
            // });

            //判定是否为文件夹
            for(var i=0; i<files.length; i++){
                var stat = fs.lstatSync(path.join(currentFolderPath, files[i]));
                if(stat.isDirectory()==true&&files[i]!='Source'){
                    fileCollection.folderArray.push(files[i]);
                }else{
                    var extension = files[i].substring(files[i].lastIndexOf('.'), files[i].length).toLowerCase(); 
                    if(extension == '.gif'){
                        fileCollection.fileArray.push(files[i]);
                    }
                    
                }
            }
            //加载文件夹
            for(var i=0; i<fileCollection.folderArray.length; i++){
                //设置Container标签
                var div_FolderCollection_Container = CreateDivElement(json.div_container);
                div_FolderCollection_Container.addEventListener('dblclick',function(){
                    ReadFolder(this.children[1].innerHTML);
                });

                //设置outIcon标签
                var img_newOutIconElement = CreateImgElement(json.img_folder, './lib/folder-min.png');

                //设置text标签
                var h_newTitleElement = CreateParElement(json.par_name, fileCollection.folderArray[i]);

                //添加子对象
                div_Main.appendChild(div_FolderCollection_Container);
                div_FolderCollection_Container.appendChild(img_newOutIconElement);
                div_FolderCollection_Container.appendChild(h_newTitleElement);
            }

            //加载gif
            for(var i=0; i<fileCollection.fileArray.length; i++){
                var div_PictureCollection_Container = CreateDivElement(json.div_container);
                //导入AE
                div_PictureCollection_Container.addEventListener('dblclick', function(){
                    var cs = new CSInterface();
                    var a = currentFolderPath.replace(/\\/g, '\\\\')+'\\\\'+this.children[1].AEName+'.aep';
                    var b = this.children[1].AEName;    
                    cs.evalScript('ImportAep("'+a+'", "'+b+'")');
                });

                var newImageElement = CreateImgElement(json.img_folder, path.join(currentFolderPath, fileCollection.fileArray[i]));
                div_PictureCollection_Container.appendChild(newImageElement);
                div_Main.appendChild(div_PictureCollection_Container);

                var name = fileCollection.fileArray[i].split('.');
                var h_newTitleElement = CreateParElement(json.par_name, name[0].substring(0,15));
                h_newTitleElement.AEName = name[0];
                div_PictureCollection_Container.appendChild(h_newTitleElement);
            }
            document.body.appendChild(div_Main);
        }
    });
}


function CreateMainDivElement(){
    var div = document.createElement('div');
    div.style.margin = '0px';
    div.style.padding = '0px';
    div.style.height = '100%';
    div.style.width = '100%';
    return div;
}


function CreateDivElement(json){    //创建DIV标签
    if(json.type == 'div'){
        var div = document.createElement('div');
        div.className = 'div_container';
        div.style.margin = '0px';
        div.style.padding = '0px';
        div.style.width = json.width;
        div.style.height = json.height;
        div.style.backgroundColor = json.backgroundColor;
        div.style.border = json.border;
        div.style.cssFloat = json.cssFloat;
        div.style.textAlign = 'center';

        div.addEventListener('mouseover', function(){
             if(this.style.borderColor!='green'){
                this.style.borderColor = 'white';
             }
        });

       div.addEventListener('mouseout', function(){
             if(this.style.borderColor!='green'){
                this.style.borderColor = 'black';
               }
        });

        div.addEventListener('click', function(){
             var div = document.getElementsByClassName('div_container');
             for(var i=0; i<div.length; i++){
                div[i].style.borderColor = 'black';
             }
           this.style.borderColor = 'green';
        });
        return div;
    }else{
        return -1;
    }
    
}


function CreateImgElement(json, imgsrc){
    if(json.type == 'img'){
        var img = document.createElement('img');
        img.style.margin = '0px';
        img.style.padding = '0px';
        img.style.position = 'relative';
        img.src = imgsrc;
        img.style.width = json.width;
        img.style.height = json.height;
        return img;
    }else{
        return -1;
    }
}

function CreateParElement(json, text){
    if(json.type == 'par'){
        var par = document.createElement('p');
        par.innerHTML = text;
        par.style.color = 'white';
        return par;
    }else{
        alert('Error');
        return -1;
    }
}

function dynamicLoadCss(url) {
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.type='text/css';
        link.rel = 'stylesheet';
        link.href = url;
        head.appendChild(link);
    }
